<script setup lang="ts">
// 使用 import 导入图片资源
// import image1 from '@/assets/Group 5.png'
// import image2 from '@/assets/Group 3.png'
// import image3 from '@/assets/Group 6.png'
// import image5 from '@/assets/Group 8.png'
// import image6 from '@/assets/4-t 1.png'
// import overlayImage1 from '@/assets/224.png'
// import overlayImage2 from '@/assets/Group 7.png'

import { onMounted, ref } from "vue";
import { getIcon } from "@/api/assets/assets";

const image1 = ref<string | null>(null);
const image2 = ref<string | null>(null);
const image3 = ref<string | null>(null);
const image5 = ref<string | null>(null);
const image6 = ref<string | null>(null);
const overlayImage1 = ref<string | null>(null);
const overlayImage2 = ref<string | null>(null);
const fetchIcon = async () => {
  try {
    const data = await getIcon([
      'Group 5.png',
      'Group 3.png',
      'Group 6.png',
      'Group 8.png',
      '4-t 1.png',
      '224.png',
      'Group 7.png',
    ]);
    image1.value = data['Group 5.png'];
    image2.value = data['Group 3.png'];
    image3.value = data['Group 6.png'];
    image5.value = data['Group 8.png'];
    image6.value = data['4-t 1.png'];
    overlayImage1.value = data['224.png'];
    overlayImage2.value = data['Group 7.png'];
  }
  catch (error) {
    console.error('API 调用错误:', error);
  }
};

onMounted(() => {
  fetchIcon();
});
</script>

<template>
  <div class="new-section">
    <div class="section-header">
      <div class="line left-line" />
      <h2 class="title">
        汇聚资源，驱动AI+X创新实践
      </h2>
      <div class="line right-line" />
    </div>
    <div class="description">
      <p>资源汇聚创新实践，整合七大广场，全面支持学生从创意到实现，提供全方位资源。</p>
    </div>
    <img :src="image1 ? image1 : ''" alt="Image 1" class="image1">
    <img :src="image2 ? image2 : ''" alt="Image 2" class="image2">
    <img :src="image3 ? image3 : ''" alt="Image 3" class="image3">
    <div class="image-wrapper">
      <img :src="overlayImage1 ? overlayImage1 : ''" alt="Image 7" class="overlay">
      <img :src="overlayImage2 ? overlayImage2 : ''" alt="Image 4" class="image4">
    </div>
    <div class="image-wrapper">
      <img :src="image5 ? image5 : ''" alt="Image 5" class="image5">
      <img :src="image6 ? image6 : ''" alt="Image 6" class="overlay-image">
    </div>
  </div>
</template>

<style scoped>
.new-section {
  width: 100%;
  padding: 50px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.line {
  width: 107px;
  height: 0;
  border: 1px solid;
  opacity: 1;
  margin-bottom: -130px;
}

.left-line {
  border-image-source: linear-gradient(270deg, rgba(102, 102, 102, 0) 0%, #000000 100%);
  border-image-slice: 1;
  transform: rotate(180deg);
  margin-right: 20px;
}

.right-line {
  border-image-source: linear-gradient(270deg, #000000 0%, rgba(102, 102, 102, 0) 100%);
  border-image-slice: 1;
  margin-left: 20px;
}

.title {
  font-family: 'Alimama ShuHeiTi', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 34px;
  color: #3f3f3f;
  white-space: nowrap;
  margin-bottom: -100px;
}

.description {
  font-family: 'Alibaba PuHuiTi', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: #86869f;
  text-align: center;
  width: 700px;
  margin-top: 100px;
  margin-bottom: -100px;
}

.image1 {
  width: 1200px;
  height: 370px;
  margin-bottom: 20px;
}

.image2 {
  width: 1200px;
  height: 385px;
}

.image3 {
  width: 1200px;
  height: 383px;
  margin-bottom: 20px;
}

.image4 {
  width: 1200px;
  height: 357px;
  margin-bottom: 70px;
}

.image5 {
  width: 1200px;
  height: 319px;
  margin-bottom: 20px;
}

.image-wrapper {
  position: relative;
}

.overlay-image {
  position: absolute;
  top: -100px;
  right: -10px;
  width: 515px;
  height: 406px;
}

.overlay {
  position: absolute;
  top: -60px;
  right: 700px;
  width: 515px;
  height: 406px;
}
</style>
